<template>
  <div class="Index">
    <el-row class="top">
      <el-col></el-col>
    </el-row>
    <el-row class="meun">
      <el-col :span="5">123</el-col>
      <el-col :span="14" style="heigth:50px;">
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#ccc"
          text-color="rgb(84, 31, 231)"
          active-text-color="#ffd04b"
          height="50px"
        >
          <el-menu-item>全部</el-menu-item>
          <el-menu-item v-for="item in cateList" :key="item.id" :index="item.name">{{item.name}}</el-menu-item>

          <!-- <el-menu-item index="1">处理中心</el-menu-item>
          <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
          </el-submenu>-->
        </el-menu>
        <el-card
          style="margin-top:5px;height:220px"
          class="car"
          v-for="item in article"
          :key="item._id"
        >
          <el-row class="articles" :gutter="10">
            <el-col :span="3">{{item.category.name}}</el-col>
            <el-col :span="21" class="title">{{item.title}}</el-col>
            <el-row :gutter="20">
              <el-col :span="5">
                <img style="width:100%" :src="item.artcleImg" alt />
              </el-col>
              <el-col :span="19">
                <el-row>
                  <el-col class="zhaiyao">{{item.description}}</el-col>
                  <el-col>
                    <el-row class="info">
                      <el-col :offset="4" :span="4">{{item.user.username}}</el-col>
                      <el-col :span="7">{{item.addTime}}</el-col>
                      <el-col :span="4">{{item.views}}</el-col>
                      <el-col :span="5">评论:203584</el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="5">123</el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'Index',
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      cateList: [],
      article: [],
      query: ''
    }
  },
  created() {
    this.getCategoryList()
    this.getArticle()
  },
  methods: {
    handleSelect(key, keyPath) {
      this.query = key
      this.getArticle()
      console.log(this.query)
    },
    getCategoryList() {
      this.$axios.get('/api/admin/cate').then(result => {
        // console.log(result)
        this.cateList = result.data
      })
    },
    getArticle() {
      this.$axios
        .get('/api/admin/showA', { params: { query: this.query } })
        .then(result => {
          console.log(result.data)
          this.article = result.data
        })
    }
  }
}
</script>
<style scoped>
body {
  background-color: rgba(150, 137, 137, 0.521);
  font-size: 14px;
}
.top {
  width: 100%;
  height: 200px;
  background: url(../assets/topBg.jpg) no-repeat -150px center;
}
.meun {
  height: 50px;
  background: #ccc;
}
.el-menu-demo li {
  height: 50px;
  line-height: 50px;
}
.title {
  color: #00a67c;
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 15px;
}
.zhaiyao {
  font-size: 14px;
  width: 100%;
  height: 100px;
  overflow: hidden;
}
.info {
  font-size: 12px;
}
</style>